<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="selectform"
        :inline="true"
        :model="selectform"
        class="demo-form-inline ManagementClass"
      >
        <el-form-item prop="oneClassName" label="导航栏名称">
          <el-input
            v-model="selectform.oneClassName"
            placeholder="请输入导航栏名称"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectSubmit('selectform')">查询</el-button>
          <el-button type="info" @click="selectResetForm('selectform')">重置</el-button>
          <el-button type="success" @click="AddSubmitDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top:6px">
      <el-table
        v-loading="loading"
        :data="tableData"
        size="medium"
        stripe
        style="width: 100%">
        <el-table-column
          show-overflow-tooltip
          prop="index"
          label="序号"/>
        <el-table-column
          show-overflow-tooltip
          prop="navName"
          label="导航栏名称"/>
        <el-table-column
          show-overflow-tooltip
          prop="navUrl"
          label="导航栏地址"/>
        <el-table-column
          show-overflow-tooltip
          prop="sort"
          label="排序"/>
        <el-table-column
          show-overflow-tooltip
          prop="createTimeString"
          label="创建时间"/>
        <el-table-column
          show-overflow-tooltip
          prop="updateTimeString"
          label="更新时间"/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)"/>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteBtn(scope.$index, scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination :pager="pager" @search="search"/>

    <el-dialog :visible.sync="Addvisble" :close-on-click-modal="false" :lock-scroll="false" :title="modalTitle" width="320px" center>
      <el-form
        ref="AddValidateForm"
        :model="AddValidateForm"
        :rules="AddRules"
        class="demo-ruleForm AddvisbleClass"
      >
        <el-form-item label="导航栏名称:" prop="navName">
          <el-input v-model="AddValidateForm.navName" type="text" maxlength="20"/>
        </el-form-item>
        <el-form-item label="导航栏地址:" prop="navUrl">
          <el-input v-model="AddValidateForm.navUrl" type="text"/>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="AddValidateForm.sort" type="text" maxlength="3"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddsubmitForm('AddValidateForm')">提交</el-button>
          <el-button @click="Addvisble = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

      <style scoped>

      </style>

<script>
import { queryAll, addNav, uptateNav, deteleNav } from '@/api/ComprehensiveManagement/NavBarManagement/index'

import pagination from '@/components/pagination/index'
export default {
  components: {
    pagination
  },
  data() {
    return {
      pager: {
        pageSize: 10,
        currentPage: 1,
        totalPage: 0
      },
      tableData: [],
      selectform: {
        oneClassName: ''
      },
      loading: false,
      Addvisble: false,
      AddValidateForm: {
        navName: '',
        navUrl: '',
        sort: ''
      },
      AddRules: {
        navName: [
          {
            required: true,
            message: '请输入导航栏名称',
            trigger: 'blur'
          }
        ],
        navUrl: [
          {
            required: true,
            message: '请输入导航栏地址',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'change' }
        ]
      },
      modalTitle: '',
      editID: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    search() {
      this.getInfo()
    },
    getInfo() {
      this.loading = true
      queryAll(this.parameter()).then(res => {
        res.data.rows.forEach((item, index) => {
          item.index = index + 1 + (this.pager.currentPage - 1) * this.pager.pageSize
          return item
        }
        )
        this.tableData = res.data.rows
        this.pager.totalPage = res.data.total
        this.loading = false
      })
    },
    parameter() {
      const obj = {
        current: this.pager.currentPage,
        size: this.pager.pageSize,
        keywordOne: this.selectform.oneClassName
      } // 默认列表字段数据
      return obj
    },
    // 搜索
    selectSubmit(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getInfo()
        } else {
          return false
        }
      })
    },
    // 搜索重置
    selectResetForm(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].resetFields()
      this.getInfo()
    },
    // 新增弹框
    AddSubmitDialog() {
      this.Addvisble = true
      this.modalTitle = '新增'
      this.$nextTick(() => {
        this.$refs.AddValidateForm.resetFields()
        for (var key in this.AddValidateForm) {
          if (this.AddValidateForm.hasOwnProperty(key)) {
            this.AddValidateForm[key] = ''
          }
        }
      })
    },
    AddsubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.modalTitle === '新增') {
            addNav(this.AddValidateForm).then(res => {
              this.pager.currentPage = 1
              this.$refs[formName].resetFields('AddValidateForm')
              this.Addvisble = false
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.getInfo()
            })
          }
          if (this.modalTitle === '编辑') {
            this.AddValidateForm.id = this.editID
            uptateNav(this.AddValidateForm).then(res => {
              this.$refs[formName].resetFields('AddValidateForm')
              this.Addvisble = false
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.getInfo()
            })
          }
        } else {
          return false
        }
      })
    },
    // 编辑
    handleEdit(index, row) {
      this.Addvisble = true
      this.modalTitle = '编辑'
      this.$nextTick(() => {
        this.$refs.AddValidateForm.resetFields()
        for (var key in this.AddValidateForm) {
          if (this.AddValidateForm.hasOwnProperty(key)) {
            this.AddValidateForm[key] = ''
          }
        }
        this.editID = row.id
        this.AddValidateForm.navName = row.navName
        this.AddValidateForm.navUrl = row.navUrl
        this.AddValidateForm.sort = row.sort
      })
    },
    // 删除
    deleteBtn(index, row) {
      this.$confirm('您确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deteleNav(row.id).then(res => {
            this.getInfo()
            this.$message({
              message: res.data,
              type: 'success'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
